<template>
  <section>
      <!-- 查询 -->
       <el-select class='cahxun' v-model="filters.ruleId" placeholder="按规则查询积分">
        <el-option
          v-for="item in inquireIntegralRuleList"
          :key="item.ruleId"
          :label="item.ruleDesc"
          :value="item.ruleId">
        </el-option>
      </el-select>

    <!--列表-->
    <template>
      <el-table  :data="integralRecordList" highlight-current-row v-loading="loading" style="margin-top:20px;text-align: center;">
        <el-table-column prop="userName" header-align="center" label="用户名" >
        </el-table-column>
        <el-table-column prop="scoreRule" header-align="center" label="规则名称" width="300" >
        </el-table-column>
        <el-table-column prop="changeCnt" header-align="center" label="积分变化" width="300">
        </el-table-column>
        <el-table-column prop="operTime" header-align="center" label="操作时间" width="300" >
        </el-table-column>
      </el-table>
    </template>
      <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="num" :total="total" style="float:right;">
      </el-pagination>
      <div class="all">总计<span class="total">{{total}}</span>条记录</div>
    </el-col>
  </section>

</template>
<script>
import { sendDataPost } from "../../api/api";
export default {
  data() {
    return {
      filters: {
        ruleId: ""
      },
      loading: false,
      integralRecordList: [],
      inquireIntegralRuleList: [],
      total: 0,
      page: 1,
      num: 20
    };
  },
  methods: {
    //获取所有积分信息
    getAllIntegralRecord: function() {
      var searchID = parseInt(this.filters.ruleId);
      console.log(searchID);
      let params = sendDataPost({
        url: "score/getAllScoreHistory",
        msg: { pgNo: this.page, num: this.num, scoreRuleId: searchID }
      });
      this.loading = true;
      let formData = JSON.stringify(params.params);
      this.$http.post(params.baseURL, formData).then(res => {
        console.log(res);
        if (res.body.msg.total > 1) {
          sessionStorage.setItem("total", res.body.msg.total);
          this.total = JSON.parse(sessionStorage.getItem("total"));
        }
        this.integralRecordList = res.body.msg.rows;
        this.loading = false;
      });
    },
    // 请求查询积分规则
    inquireIntegralRule() {
      let params = sendDataPost({ url: "score/getScoreRule", msg: {} });
      let formData = JSON.stringify(params.params);
      this.$http.post(params.baseURL, formData).then(res => {
        console.log(res);
        let o = {
          ruleDesc: "全部积分",
          ruleId: '',
          ruleName: "all",
          score: 0
        };
        this.inquireIntegralRuleList = res.body.msg;
        this.inquireIntegralRuleList.unshift(o)
        console.log("---------------------------------")
        console.log(this.inquireIntegralRuleList);
      });
    },

    // 分页请求
    handleCurrentChange(val) {
      this.total = JSON.parse(sessionStorage.getItem("total"));
      this.page = val;
      this.getAllIntegralRecord();
    }
  },
  watch: {
    "filters.ruleId": function() {
      this.getAllIntegralRecord();
    }
  },
  created() {
    this.inquireIntegralRule();
  },
  mounted() {
    this.getAllIntegralRecord();
  }
};
</script>

<style scoped>
.cahxun {
  margin-top: 20px;
}
.all {
  font-size: 16px;
  line-height: 32px;
  color: #666;
}
.total {
  padding: 0 5px;
  color: #52bae9;
}
</style>